                                                                                      <template>
  <div class="container" style="margin-top: 50px; margin-bottom: 50px;">
    <el-card shadow="always" v-loading="loading"
             element-loading-text="订单提交中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
      <!-- 航班信息 -->
      <el-row>
        <el-col :span="24" v-if="reservationData.flightObj.first">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">航班信息</span>
              <span style="float: right;">
                <el-alert
                    :closable="false"
                    title="所有起飞时间/降落时间均为当地时间"
                    show-icon
                    type="info" >
              </el-alert>
              </span>
            </div>
            <el-table
                :data="tableData"
                style="width: 100%">
              <el-table-column
                  prop="startStationDisplay"
                  label="出发地"
                  width="180">
              </el-table-column>
              <el-table-column
                  center
                  prop="startTime"
                  label="起飞时间">
                <template v-slot="scope">
                  {{parseTime(scope.row.flightSchedule.startTime)}}
                </template>
              </el-table-column>
              <el-table-column
                  prop="endStationDisplay"
                  label="目的地"
                  width="180">
              </el-table-column>
              <el-table-column
                  header-alight="right"
                  align="right"
                  prop="price"
                  label="头等舱"
                  width="100">
                <template v-slot="scope">
                  {{scope.row.flightSchedule.headPrice}}
                </template>
              </el-table-column>
              <el-table-column
                  header-alight="right"
                  align="right"
                  prop="price"
                  label="商务舱"
                  width="100">
                <template v-slot="scope">
                  {{scope.row.flightSchedule.businessPrice}}
                </template>
              </el-table-column>
              <el-table-column
                  header-alight="right"
                  align="right"
                  prop="price"
                  label="经济舱"
                  width="100">
                <template v-slot="scope">
                  {{scope.row.flightSchedule.economyPrice}}
                </template>
              </el-table-column>
              <el-table-column
                  header-alight="right"
                  align="right"
                  prop="address"
                  label="机建燃油费"
                  width="100">
                <template v-slot="scope">
                  50.00
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <!-- 乘机人信息 -->
      <el-row style="margin-top: 20px;">
        <el-col :span="24" v-if="reservationData.flightObj.first">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">乘机人信息</span>
              <el-button type="primary" plain style="float: right; margin-left: 10px;" @click="addPassenger">新增</el-button>
              <span style="float: right;">
                <el-alert
                    show-icon
                    :closable="false"
                    title="出票后信息无法更改，请确保以下内容与乘机所持证件保持一致"
                    type="warning">
              </el-alert>
              </span>
            </div>
            <el-table
                v-if="passengerData.length > 0"
                :data="passengerData"
                style="width: 100%">
              <el-table-column
                  prop="startStationDisplay"
                  label="姓名">
                <template v-slot="scope">
                  <el-select v-model="passengerData[scope.$index].dataId" placeholder="请选择乘客" @change="handlePassengerChange(scope.$index)">
                    <el-option
                        v-for="item in flightAttendantAvailable"
                        :key="item.dataId"
                        :label="item.name"
                        :value="item.dataId"
                        :disabled="!item.available">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                  center
                  prop="idCardNumber"
                  label="证件号">
                <template v-slot="scope">
                  {{idNumberFormatter(passengerData[scope.$index].idNumber)}}
                </template>
              </el-table-column>
              <el-table-column
                  prop="endStationDisplay"
                  label="舱位">
                <template v-slot="scope">
                  <el-select v-model="passengerData[scope.$index].flightClass" placeholder="请选择舱位" @change="handleFlightClass(scope.$index)">
                    <el-option
                        v-for="item in dict.type.seat_type"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="danger"
                      @click="handlePassengerRemove(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-empty :image-size="200" v-else></el-empty>
          </el-card>
        </el-col>
      </el-row>

      <!-- 通知人信息 -->
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">预订结果通知</span>
              <span style="float: right;">
                <el-alert
                    show-icon
                    :closable="false"
                    title="预订成功后，通知信息将发送到此邮箱"
                    type="info">
              </el-alert>
              </span>
            </div>
            <el-form :model="flightEmailObj" label-width="80px">
              <el-form-item label="邮箱">
                <el-input v-model="flightEmailObj.flightEmail" placeholder="请输入电子邮箱"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <!-- 确认预订 -->
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-card shadow="hover">
            <el-row style="margin-top: 20px;" type="flex" justify="space-between" align="middle">
              <el-col :span="8">
                <i class="el-icon-warning-outline"></i>
                <el-popover
                    placement="top-start"
                    title="退改签规则"
                    width="600"
                    trigger="hover"
                    content="1、一般是起飞前24小时以前收不超过10%的退票费起飞前22以内2小时以前收10%的退票费，起飞前2小时以内收20%的退票费，其他规定见航空公司退票明细表。
                    2、退票只能是原出票地退款，客人如不是本售票点购买的机票，我们只能帮客人取消座位，并在机票的最后一页写上客人于X年X月X日X点X分申请退票，同时盖上公章。若机票后有机场盖的航班延误公章，则该票全退，不收取任何费用。
                    3、若姓名输错，属同音字错误，其它时间和航段等不变，则可向航空公司申请全退，将重新出票的白联附在退票上面，注明同音字输错，申请全退。
                    4.头等舱、公务舱、经济舱全价票免收退票手续费;票价七折至九九折经济舱之间机票的退票，收取票面价10%的退票手续费;票价五折至六九折之间机票的退票，收取票面价20%的退票手续费;票价四折至四九折之间机票的退票，收取票面价50%的退票手续费。票价四折以下机票的退票,按具体运价产品使用条件执行。">
                  <a href="#" slot="reference" >退改签规则</a>
                </el-popover>
                &nbsp;
                <i class="el-icon-warning-outline"></i>
                <el-popover
                    placement="top-start"
                    title="航班行李需知:"
                    width="600"
                    trigger="hover"
                    content="按规定，托运的行李每件不能超过50千克，体积不能超过40厘米×60厘米×100厘米，每位旅客免费。托运行李额头等舱为30千克，经济舱为20千克，持婴儿票的旅客无免费行李额。超出部分每千克按经济舱票价的1.5%加收费用。托运的行李应包装完好、捆扎牢固，行李上不能附插其他物品，竹篮、网兜、草绳、草袋等不能作为外包装物，行李上要写明旅客姓名、详细地址和电话号码。
                    机场安检部门提醒旅客，托运的行李中严禁夹带危险、违禁物品，酒类限带两瓶，重要文件和资料、外交信件、证券、货币、汇票、贵重、易碎和易腐物品以及其他需要专人照管的物品，不得夹入行李内托运。">
                  <a href="#" slot="reference">航位及行李</a>
                </el-popover>
                &nbsp;
                <i class="el-icon-warning-outline"></i>
                <el-popover
                    placement="top-start"
                    title="儿童/婴儿票:"
                    width="600"
                    trigger="hover"
                    content="不满两周岁的婴儿乘机按成人票价的10%购买婴儿票;年龄满两周岁、但不满l2周岁的儿童按成人票价的50%购买儿童票。购买儿童票时，应提供儿童、婴儿出生年月的有效证件，如出生证、户口簿等。
                    2-12周岁儿童机票规定:年龄2-12周岁(个别航空公司不执行此标准)，以起飞日期为准;国内机票按照同一航班成人普通全票价的50%购买儿童票，免机场建设费，燃油附加费收取50%，
                    提供座位;国际机票有成人陪伴的儿童可享受成人销售价75%的价格，个别航空公司在个别航线上略有不同。免收机场建设费，其它税项以航空公司规定为准。无成人陪伴的儿童(5-12周岁)需购买成人票，在航空公司柜台办理。">
                  <a href="#" slot="reference">儿童/婴儿票</a>
                </el-popover>
              </el-col>
              <el-col :span="6">
                <span>
                  已选<strong style="color: #F56C6C; font-size: 16px;">&nbsp;{{passengerData.length}}&nbsp;</strong>个乘机人共
                  <strong>￥</strong>
                  <strong style="color: #F56C6C; font-size: 16px;">&nbsp;{{totalPrice.toFixed(2)}}&nbsp;</strong>
                  元
                </span>
              </el-col>
              <el-col :span="7">
                <span><el-checkbox v-model="readAndAgree">我已阅读并愿意遵从<a href="#">迅盾互联服务协议</a></el-checkbox></span>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" :disabled="!readAndAgree || flightEmailObj.flightEmail==''" style="width: 100%;" @click="send">确认预订</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import {getPassengerList} from "@/api/member/member";
import {sendFlightDetail} from "@/api/flight/reservation";
import { flightDetail} from '@/api/flight/schedule'

import Cookies from 'js-cookie'

export default {
  name: "reserVation",
  dicts: ['seat_type'],
  data() {
    return {
      // 表单提交中
      loading: false,
      // 价格统计
      priceObj: {
        head: 0,
        business: 0,
        economy: 0
      },
      // 阅读并同意协议
      readAndAgree: false,
      // 订单总金额
      totalPrice: 0,
      // 可选的乘机人信息
      flightAttendantAvailable: [],
      // 乘机人信息
      passengerData: [],
      // 航班列表展示数据
      tableData: [],
      // 航班数据
      reservationFlights: {
        first: {},
        second: {},
        third: {},
        fourth: {},
        fifth: {},
        sixth: {}
      },
      // 预订数据
      reservationData: {
        reservationType: '', // 1 单程航班 2 往返航班 3 中转
        // 航班数据ID数组
        flights: [],
        // 航班数据ID对象
        flightObj: {},
        // 乘客
        passengers: []
      },
      // 乘机人选项的数据
      flightAttendant: [],
      // 邮箱对象
      flightEmailObj: {
        flightEmail: ''
      }
    }
  },
  created() {
    // 加载航班列表
    this.loadFlights();

    // 加载乘客列表
    this.loadPassengers();
  },
  mounted() {
  },
  methods:{
    // 移除乘客
    handlePassengerRemove(index, row) {
      this.flightAttendantAvailable.forEach((item, index) => {
        if (item.dataId == row.dataId) {
          this.flightAttendantAvailable[index]['available'] = true
        }
      })
      let flightClass = this.passengerData[index].flightClass
      if (flightClass == 'A') {
        this.totalPrice -= this.priceObj.head
      } else if (flightClass == 'B') {
        this.totalPrice -= this.priceObj.business
      } else if (flightClass == 'C') {
        this.totalPrice -= this.priceObj.economy
      }
      this.passengerData.splice(index, 1)
    },
    // 身份证号格式化器
    idNumberFormatter(val) {
      if (null != val && ""!= val){
        return val.substring(0, 3) + '***********' + val.substring(14)
      }
    },
    // 乘机人舱位选择事件
    handleFlightClass(index) {
      let flightClass = this.passengerData[index].flightClass
      if (flightClass == 'A') {
        this.totalPrice += this.priceObj.head
      } else if (flightClass == 'B') {
        this.totalPrice += this.priceObj.business
      } else if (flightClass == 'C') {
        this.totalPrice += this.priceObj.economy
      }
    },
    // 乘机人选择事件
    handlePassengerChange(index) {
      let that = this
      let selected = ''
      this.flightAttendant.forEach(item => {
        if (item.dataId == this.passengerData[index].dataId) {
          that.passengerData[index].idNumber = item.idNumber
          selected = item.dataId
        }
      })

      this.flightAttendantAvailable.forEach((item, index) => {
        if (item.dataId == selected) {
          this.flightAttendantAvailable[index]['available'] = false
        }
      })
    },
    // 添加乘机人
    addPassenger() {
      if (this.passengerData.length < this.flightAttendant.length) {
        this.passengerData.push({
          dataId: '',
          flightClass: ''
        })
      } else {
        this.$message.warning("没有更多的乘客信息，请前往个人中心进行维护。");
      }
    },
    // 加载航班列表
    loadFlights() {
      // 获取表单
      this.reservationData = JSON.parse(Cookies.get('reservationData'))

      if (this.reservationData.flightObj.first.length > 0) {
        // 查询单程航班
        flightDetail(this.reservationData.flightObj.first).then(res => {
          this.reservationFlights.first = res.data
          this.tableData.push(res.data)
          this.priceObj.head += res.data.flightSchedule.headPrice
          this.priceObj.business += res.data.flightSchedule.businessPrice
          this.priceObj.economy += res.data.flightSchedule.economyPrice
        })
      }

      if (this.reservationData.flightObj.second.length > 0) {
        // 查询单程航班
        flightDetail(this.reservationData.flightObj.second).then(res => {
          this.reservationFlights.second = res.data
          this.tableData.push(res.data)
          this.priceObj.head += res.data.flightSchedule.headPrice
          this.priceObj.business += res.data.flightSchedule.businessPrice
          this.priceObj.economy += res.data.flightSchedule.economyPrice
        })
      }

      if (this.reservationData.flightObj.third.length > 0) {
        // 查询单程航班
        flightDetail(this.reservationData.flightObj.third).then(res => {
          this.reservationFlights.third = res.data
          this.tableData.push(res.data)
          this.priceObj.head += res.data.flightSchedule.headPrice
          this.priceObj.business += res.data.flightSchedule.businessPrice
          this.priceObj.economy += res.data.flightSchedule.economyPrice
        })
      }

      if (this.reservationData.flightObj.fourth.length > 0) {
        // 查询单程航班
        flightDetail(this.reservationData.flightObj.fourth).then(res => {
          this.reservationFlights.fourth = res.data
          this.tableData.push(res.data)
          this.riceObj.head += res.data.flightSchedule.headPrice
          this.priceObj.business += res.data.flightSchedule.businessPrice
          this.priceObj.economy += res.data.flightSchedule.economyPrice
        })
      }

      if (this.reservationData.flightObj.fifth.length > 0) {
        // 查询单程航班
        flightDetail(this.reservationData.flightObj.fifth).then(res => {
          this.reservationFlights.fifth = res.data
          this.tableData.push(res.data)
          this.priceObj.head += res.data.flightSchedule.headPrice
          this.priceObj.business += res.data.flightSchedule.businessPrice
          this.priceObj.economy += res.data.flightSchedule.economyPrice
        })
      }

      if (this.reservationData.flightObj.sixth.length > 0) {
        // 查询单程航班
        flightDetail(this.reservationData.flightObj.sixth).then(res => {
          this.reservationFlights.sixth = res.data
          this.tableData.push(res.data)
          this.priceObj.head += res.data.flightSchedule.headPrice
          this.priceObj.business += res.data.flightSchedule.businessPrice
          this.priceObj.economy += res.data.flightSchedule.economyPrice
        })
      }
    },
    // 加载乘客列表
    loadPassengers() {
      // 获取乘客信息
      getPassengerList().then((res)=>{
        this.flightAttendant = res.data
        this.flightAttendant.forEach(item => {
          item['available'] = true
          this.flightAttendantAvailable.push(item)
        })
      });
    },
    // 发送航班数据给后台
    send() {
      this.loading = true
      if(this.passengerData.length <= 0){
        this.$message({
          message:"请选择乘机人",
          type:'warning',
          center: true
        }),
        this.commitOrder=false
      }
      else if(this.flightEmailObj.flightEmail==''){
        this.$message({
          message:"请输入邮箱",
          type:'warning',
          center: true
        })
        this.commitOrder=false
      }else if(!this.readAndAgree){
        this.$message({
          message:"请勾选用户协议",
          type:'warning',
          center: true
        })
        this.commitOrder=false
      } else {
        this.reservationData.passengers = []
        this.passengerData.forEach(item => {
          this.reservationData.passengers.push(item)
        })
        // 航班预定
        sendFlightDetail(this.reservationData).then(res => {
          if (res.code == 200) {
            this.loading = false
            this.$router.push({ name: 'ReservationSuccess'})
          } else {
            this.loading = false
            this.$router.push({ name: 'ReservationFail'})
          }
        })
      }
    },
  }
};
</script>

<style  lang="scss" scoped>
.title {
  font-weight: bold;
}
</style>
